<template>
  <div class="attr-container">
    <el-form style="padding: 20px" label-width="70px">
      <el-form-item label="页面名称">
        <el-input v-model="canvasStyle.pageName" placeholder="页面名称"></el-input>
      </el-form-item>
      <el-form-item label="播放类型">
        <el-radio-group v-model="canvasStyle.pagePlayTime">
          <el-radio label="1">自动</el-radio>
          <el-radio label="0">手动</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="播放时间">
        <el-input v-model="canvasStyle.pageTime"><template slot="append">秒</template></el-input>
      </el-form-item>
      <el-form-item label="背景色">
        <el-color-picker v-model="canvasStyle.bgColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="背景图">
        <el-input v-model="canvasStyle.bgImg" disabled placeholder="请选择图片">
          <div slot="append">
            <el-button icon="el-icon-plus" @click="handlerBg"></el-button>
            <el-button icon="el-icon-delete" @click="handlerDelBg"></el-button>
          </div>
        </el-input>
      </el-form-item>
    </el-form>

    <el-dialog title="图片素材" :visible.sync="picVisible" width="600px">
      <div class="dialog-cont">
        <div class="search">
          <el-input v-model="keyWorld" placeholder="图片搜索"></el-input>
          <el-button class="btn" type="primary">搜索</el-button>
        </div>
        <div class="table-list">
          <el-table ref="table" :data="tableData" style="width: 100%" @row-click="handlerRow">
            <el-table-column align="center" width="55" label="选择">
              <template #default="scope">
                <el-radio v-model="tableSelect" :label="scope.row.id" />
              </template>
            </el-table-column>
            <el-table-column prop="pic" label="图片" width="180">
              <template #default="scope">
                <img class="img" :src="scope.row.path" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180"> </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="picVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { filter, get } from 'lodash'

export default {
  name: 'CanvasAttr',
  data() {
    return {
      checkList: '0',
      options: {
        pageName: '页面名称',
        pagePlayTime: '播放类型',
        pageTime: '播放时间',
        bgColor: '背景色',
        bgImg: '背景图',
      },
      picVisible: false,
      keyWorld: '',
      tableData: [
        {
          id: '111',
          path: 'https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg',
          name: '图片素材',
        },
        {
          id: '222',
          path: 'https://img1.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082',
          name: '图片素材2222',
        },
      ],
      tableSelect: '',
    }
  },
  computed: {
    ...mapState(['canvasStyleData', 'curCanvasPageIndex']),
    canvasStyle() {
      return get(this.canvasStyleData, `[${this.curCanvasPageIndex}]`) || {}
    },
  },
  watch: {
    picVisible(newVal) {
      if (!newVal) {
        this.tableSelect = ''
      }
    },
  },
  methods: {
    handlerBg() {
      this.picVisible = true
    },
    handlerDelBg() {
      this.$store.commit('setPageBg', '')
    },
    handlerSure() {
      const { path = '' } =
        get(
          filter(this.tableData, (item) => item.id === this.tableSelect),
          '[0]',
        ) || {}
      this.$store.commit('setPageBg', path)
      this.picVisible = false
    },
    handlerRow(row) {
      this.tableSelect = row.id
    },
  },
}
</script>

<style lang="scss" scoped>
.attr-container {
  .title {
    text-align: center;
    margin-bottom: 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid #e4e7ed;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
  }
}

.dialog-cont {
  .table-list {
    max-height: 400px;
    overflow-y: auto;
    .img {
      width: 100px;
      height: 100px;
    }
  }
  .search {
    width: 300px;
    margin-bottom: 10px;
    display: flex;
    .btn {
      margin-left: 10px;
    }
  }
}
</style>
